<template>
  <div class="bd">
    <template v-if="method === 'reactive'">
      <son-a
        :simpleProp="state.numVal"
        :refrenceProp="state.person"
        @change="handleChangePerson"
      ></son-a>

      <button @click="changeNumberB">修改数字</button>
      <button @click="changePersonB">修改人员</button>
      <button @click="changeC">尝试修改</button>
    </template>
    <template v-else>
      <son-a :simpleProp="numVal" :refrenceProp="person" @change="handleChangePerson"></son-a>
      <button @click="changeNumberA">修改数字</button>
      <button @click="changePersonA">修改人员</button>
    </template>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

import SonA from './SonA.vue'

// 切换两种响应变量方式
// reactive || ref
const method = ref('reactive')
// const method = ref('ref')

// 基本类型（简单类型），能否使用reactive？
// const numVal = ref(1)

// 引用类型（复杂类型），使用ref和reactive有何区别？
const person = ref({
  name: 'Lili',
  age: 18
})
console.log('person===>', person)

// 响应式变量的声明应使用const，而不是let， 为什么？
let state = reactive({
  numVal: 3,
  person: {
    name: 'nsh',
    age: 19
  }
})

// const changeState = () => {
//   state = {
//     numVal: 4,
//     person: {
//       name: 'newName',
//       age: 22
//     }
//   }
// }

// 使用let 代码能跑， 没有问题；
// 但是为什么不建议使用let

const changeNumberA = () => {
  // numVal.value = 999
  // 思考一下，如果这里使用
  numVal = 999
  // 会怎样？
}

const changePersonA = () => {
  person.value = {
    name: 'xiaohong',
    age: 22
  }
}

const changeNumberB = () => {
  state.numVal = 888
}

const changePersonB = () => {
  state.person = {
    name: 'xiaohong2',
    age: 25
  }
  // state.person.name = 'xiaohong333'
}

// bad change
const changeC = () => {
  state = reactive({
    numVal: 666,
    person: {
      name: 'sw',
      age: 26
    }
  })
}

const handleChangePerson = (data) => {
  // state.person = data
  console.log('子组件传入父组件的值====>', data)
}
</script>
